<template>
  <div class="home-container" :class="{ 'mobile': isMobile, 'sidebar-closed': !sidebarOpen }">
    <!-- 侧边栏 -->
    <aside class="sidebar" v-show="sidebarOpen">
      <div class="sidebar-header">
        <h2 class="app-title">OpenNav</h2>
        <p class="app-subtitle">开源导航</p>
      </div>
      <div class="category-list">
        <div 
          v-for="category in categories" 
          :key="category.id"
          class="category-item"
          :class="{ active: selectedCategoryId === category.id }"
          @click="handleCategoryClick(category.id)"
        >
          <el-icon :size="20" class="category-icon">
            <component :is="category.icon || 'Menu'" />
          </el-icon>
          <span class="category-name">{{ category.name }}</span>
        </div>
      </div>
      <!-- 移动端关闭按钮 -->
      <button class="close-sidebar-btn" @click="toggleSidebar" v-if="isMobile">
        <el-icon><Close /></el-icon>
      </button>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 移动端菜单按钮 -->
      <button class="mobile-menu-btn" @click="toggleSidebar" v-if="isMobile">
        <el-icon><Menu /></el-icon>
      </button>
      <!-- 搜索栏 -->
      <div class="search-bar">
        <div class="search-container">
          <div class="search-input-wrapper">
            <el-input
              v-model="searchKeyword"
              :placeholder="searchType === 'internal' ? '搜索开源项目...' : '输入关键词进行站外搜索...'"
              class="search-input"
              @keyup.enter="handleSearchSubmit"
              @input="handleSearchInput"
              clearable
              :validate-event="false"
            >
              <!-- 搜索类型切换 -->
              <template #prefix>
                <div class="search-prefix-container">
                  <el-select 
                    v-model="searchType" 
                    placeholder="类型"
                    size="small"
                    class="search-type-select"
                    style="width: 80px"
                    @change="handleSearchTypeChange"
                  >
                    <el-option label="站内" value="internal"></el-option>
                    <el-option label="站外" value="external"></el-option>
                  </el-select>
                  <el-icon class="search-icon"><Search /></el-icon>
                </div>
              </template>
              <!-- 右侧布局 -->
              <template #append>
                <div class="search-append-container">
                  <!-- 站外搜索时显示搜索引擎选择 -->
                  <el-select 
                    v-if="searchType === 'external' " 
                    v-model="searchEngine" 
                    placeholder="搜索"
                    size="small"
                    class="search-engine-select"
                  >
                    <el-option label="百度" value="baidu"></el-option>
                    <el-option label="谷歌" value="google"></el-option>
                    <el-option label="必应" value="bing"></el-option>
                    <el-option label="GitHub" value="github"></el-option>
                    <el-option label="Stack Overflow" value="stackoverflow"></el-option>
                  </el-select>
                  <!-- 搜索按钮 -->
                  <el-button 
                    type="primary" 
                    size="small" 
                    @click="handleSearchSubmit"
                    class="search-button"
                    :icon="Search"
                    :loading="isSearching"
                  >
                    {{ isSearching ? '搜索中...' : '搜索' }}
                  </el-button>
                </div>
              </template>
            </el-input>
            
            <!-- 搜索建议下拉框 -->
            <transition name="el-zoom-in-top">
              <div v-if="showSuggestions && suggestions.length > 0" class="search-suggestions">
                <div 
                  v-for="(suggestion, index) in suggestions" 
                  :key="index"
                  class="suggestion-item"
                  @click="selectSuggestion(suggestion)"
                  @mouseenter="highlightedIndex = index"
                  :class="{ highlighted: highlightedIndex === index }"
                >
                  <el-icon class="suggestion-icon"><Search /></el-icon>
                  <span>{{ suggestion }}</span>
                </div>
              </div>
            </transition>
            
            <!-- 搜索历史 -->
            <div v-if="showSearchHistory && searchHistory.length > 0" class="search-history">
              <div class="history-header">
                <span class="history-title">搜索历史</span>
                <el-button type="text" size="small" @click="clearSearchHistory">清空</el-button>
              </div>
              <div class="history-tags">
                <el-tag 
                  v-for="(item, index) in searchHistory" 
                  :key="index"
                  type="info"
                  size="small"
                  @click="useHistorySearch(item)"
                  class="history-tag"
                >
                  {{ item }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 二级分类标签 -->
      <div class="subcategory-tabs">
        <el-scrollbar>
          <el-tag
            v-for="subCategory in currentSubCategories"
            :key="subCategory.id"
            :effect="selectedSubCategoryId === subCategory.id ? 'dark' : 'plain'"
            :class="{ active: selectedSubCategoryId === subCategory.id }"
            @click="handleSubCategoryClick(subCategory.id)"
            class="subcategory-tag"
          >
            {{ subCategory.name }}
          </el-tag>
          <el-tag
            :effect="selectedSubCategoryId === '' ? 'dark' : 'plain'"
            :class="{ active: selectedSubCategoryId === '' }"
            @click="handleSubCategoryClick('')"
            class="subcategory-tag"
          >
            全部
          </el-tag>
        </el-scrollbar>
      </div>
      
      <!-- 三级分类标签 -->
      <div v-if="currentThirdCategories.length > 0" class="thirdcategory-tabs">
        <div class="thirdcategory-content">
          <el-tag
            v-for="thirdCategory in currentThirdCategories"
            :key="thirdCategory.id"
            :effect="selectedThirdCategoryId === thirdCategory.id ? 'dark' : 'plain'"
            :class="{ active: selectedThirdCategoryId === thirdCategory.id }"
            @click="handleThirdCategoryClick(thirdCategory.id)"
            class="thirdcategory-tag"
          >
            {{ thirdCategory.name }}
          </el-tag>
          <el-tag
            :effect="selectedThirdCategoryId === '' ? 'dark' : 'plain'"
            :class="{ active: selectedThirdCategoryId === '' }"
            @click="handleThirdCategoryClick('')"
            class="thirdcategory-tag"
          >
            全部
          </el-tag>
        </div>
      </div>

      <!-- 瀑布流内容区 -->
      <div class="waterfall-container" ref="waterfallRef" @scroll="handleWaterfallScroll">
        <div v-for="(item, index) in filteredNavItems" :key="item.id" class="waterfall-item">
          <div class="nav-card" @click="openUrl(item.url)">
            <div class="card-header">
              <div class="card-logo" :style="{ backgroundColor: getRandomColor(index) }">
                {{ item.name.charAt(0).toUpperCase() }}
              </div>
              <h3 class="card-title">{{ item.name }}</h3>
            </div>
            <p class="card-description">{{ item.description }}</p>
            <div class="card-footer">
              <el-tag size="small" class="category-badge">{{ getCategoryName(item.categoryId) }}</el-tag>
              <el-tag size="small" class="subcategory-badge">{{ getSubCategoryName(item.subCategoryId) }}</el-tag>
            </div>
          </div>
        </div>
        
        <!-- 空状态 -->
        <div v-if="filteredNavItems.length === 0" class="empty-state">
          <el-empty description="暂无相关内容" />
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed, ref, onBeforeUnmount, onUnmounted } from 'vue'
import { useAppStore } from '../store'
// 【动态导航注释】以下是Vue 3 Composition API实现
// 实际与Java后端集成时，需要在main.ts中配置Axios拦截器
// 例如：
// import axios from 'axios'
// axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL || 'http://localhost:8080'
// // 添加请求拦截器
// axios.interceptors.request.use(config => {
//   // 可以在这里添加认证token
//   const token = localStorage.getItem('token')
//   if (token) {
//     config.headers.Authorization = `Bearer ${token}`
//   }
//   return config
// })
import { Search, Menu, Close } from '@element-plus/icons-vue'

// 响应式状态
const isMobile = ref(window.innerWidth <= 768)
const sidebarOpen = ref(!isMobile.value)

// 监听窗口大小变化
const handleResize = () => {
  const newIsMobile = window.innerWidth <= 768
  isMobile.value = newIsMobile
  if (!newIsMobile) {
    sidebarOpen.value = true
  }
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})

// 切换侧边栏
const toggleSidebar = () => {
  sidebarOpen.value = !sidebarOpen.value
}

// 瀑布流容器引用
const waterfallRef = ref<HTMLElement>()

const store = useAppStore()

// 计算属性
const categories = computed(() => store.categories)
const currentSubCategories = computed(() => store.currentSubCategories)
const currentThirdCategories = computed(() => store.currentThirdCategories)
const filteredNavItems = computed(() => store.filteredNavItems)
const selectedCategoryId = computed(() => store.selectedCategoryId)
const selectedSubCategoryId = computed(() => store.selectedSubCategoryId)
const selectedThirdCategoryId = computed(() => store.selectedThirdCategoryId)
const searchKeyword = computed({
  get: () => store.searchKeyword,
  set: (value) => store.setSearchKeyword(value)
})

// 滚动切换导航功能
const lastScrollTop = ref(0)
let isProcessingScroll = false

const handleWaterfallScroll = (event: Event) => {
  if (isProcessingScroll) return
  
  const target = event.target as HTMLElement
  const scrollTop = target.scrollTop
  const scrollHeight = target.scrollHeight
  const clientHeight = target.clientHeight
  
  // 检测是否滚动到顶部或底部
  if (scrollTop <= 0) {
    // 滚动到顶部，切换到上一个分类
    switchToPreviousCategory()
  } else if (scrollTop + clientHeight >= scrollHeight - 10) {
    // 滚动到底部，切换到下一个分类
    switchToNextCategory()
  }
  
  lastScrollTop.value = scrollTop
}

// 切换到下一个分类
const switchToNextCategory = () => {
  isProcessingScroll = true
  const currentIndex = categories.value.findIndex(cat => cat.id === selectedCategoryId.value)
  if (currentIndex < categories.value.length - 1 && categories.value[currentIndex + 1]) {
    const nextCategory = categories.value[currentIndex + 1]!
    store.setSelectedCategory(nextCategory.id)
  }
  // 延迟重置，避免连续触发
  setTimeout(() => {
    isProcessingScroll = false
  }, 500)
}

// 切换到上一个分类
const switchToPreviousCategory = () => {
  isProcessingScroll = true
  const currentIndex = categories.value.findIndex(cat => cat.id === selectedCategoryId.value)
  if (currentIndex > 0 && categories.value[currentIndex - 1]) {
    const previousCategory = categories.value[currentIndex - 1]!
    store.setSelectedCategory(previousCategory.id)
  }
  // 延迟重置，避免连续触发
  setTimeout(() => {
    isProcessingScroll = false
  }, 500)
}

// 处理分类点击
  const handleCategoryClick = (categoryId: string) => {
    // 手机布局下点击分类后隐藏侧边栏
    if (isMobile.value) {
      sidebarOpen.value = false;
    }
    // 点击一级分类后重置二级和三级分类选择
    store.setSelectedCategory(categoryId)
    
    // 【动态导航注释】实际项目中，可以考虑在这里添加分析日志
    // 例如记录用户的分类浏览行为
    // try {
    //   await axios.post('/api/analytics/browse', { 
    //     categoryId, 
    //     timestamp: new Date().toISOString() 
    //   })
    // } catch (error) {
    //   console.warn('记录浏览数据失败:', error)
    // }
  }

// 处理二级分类点击
  const handleSubCategoryClick = (subCategoryId: string) => {
    // 点击二级分类后重置三级分类选择
    store.setSelectedSubCategory(subCategoryId)
    
    // 【动态导航注释】在实际项目中，可以考虑按需加载三级分类数据
    // 例如，仅当用户点击二级分类时才加载对应的三级分类
    // if (store.selectedCategoryId) {
    //   await store.loadThirdCategoriesBySubCategory(subCategoryId)
    // }
  }

// 处理三级分类点击
  const handleThirdCategoryClick = (thirdCategoryId: string) => {
    // 点击三级分类
    store.setSelectedThirdCategory(thirdCategoryId)
    
    // 【动态导航注释】在实际项目中，可以考虑按需加载导航项数据
    // 例如，仅当用户点击三级分类时才加载对应的导航项
    // if (store.selectedCategoryId && store.selectedSubCategoryId) {
    //   await store.loadNavItemsByThirdCategory(thirdCategoryId)
    // }
  }

// 搜索类型：internal（站内）、external（站外）
  const searchType = ref('internal')
  // 搜索引擎选择
  const searchEngine = ref('baidu')
  // 搜索加载状态
  const isSearching = ref(false)
  // 搜索建议
  const showSuggestions = ref(false)
  const suggestions = ref<string[]>([])
  const highlightedIndex = ref(-1)
  // 搜索历史
  const showSearchHistory = ref(false)
  const searchHistory = ref<string[]>([])
  
  // 初始化搜索历史
  const initSearchHistory = () => {
    const history = localStorage.getItem('openNavSearchHistory')
    if (history) {
      searchHistory.value = JSON.parse(history)
    }
  }
  
  // 保存搜索到历史记录
  const saveSearchToHistory = (keyword: string) => {
    if (!keyword.trim()) return
    
    // 移除重复项
    const index = searchHistory.value.indexOf(keyword)
    if (index > -1) {
      searchHistory.value.splice(index, 1)
    }
    
    // 添加到开头
    searchHistory.value.unshift(keyword)
    
    // 限制历史记录数量
    if (searchHistory.value.length > 10) {
      searchHistory.value = searchHistory.value.slice(0, 10)
    }
    
    // 保存到本地存储
    localStorage.setItem('openNavSearchHistory', JSON.stringify(searchHistory.value))
  }
  
  // 处理搜索输入变化
  const handleSearchInput = (value: string) => {
    if (!value.trim()) {
      showSuggestions.value = false
      showSearchHistory.value = true
      return
    }
    
    showSearchHistory.value = false
    
    // 模拟搜索建议（实际项目中可以从API获取）
    // 这里基于已有的导航项生成建议
    const allItems = store.navItems || []
    const filtered = allItems
      .filter(item => 
        item.name.toLowerCase().includes(value.toLowerCase()) ||
        item.description.toLowerCase().includes(value.toLowerCase())
      )
      .map(item => item.name)
      .slice(0, 5)
    
    suggestions.value = [...new Set(filtered)]
    showSuggestions.value = suggestions.value.length > 0
    highlightedIndex.value = -1
  }
  
  // 处理搜索类型变化
  const handleSearchTypeChange = () => {
    showSuggestions.value = false
    showSearchHistory.value = false
    // 清空输入框
    if (searchKeyword.value) {
      searchKeyword.value = ''
    }
  }
  
  // 选择搜索建议
  const selectSuggestion = (suggestion: string) => {
    searchKeyword.value = suggestion
    showSuggestions.value = false
    showSearchHistory.value = false
    handleSearchSubmit()
  }
  
  // 使用历史搜索
  const useHistorySearch = (keyword: string) => {
    searchKeyword.value = keyword
    showSearchHistory.value = false
    handleSearchSubmit()
  }
  
  // 清空搜索历史
  const clearSearchHistory = () => {
    searchHistory.value = []
    localStorage.removeItem('openNavSearchHistory')
    showSearchHistory.value = false
  }
  
  // 处理搜索提交
  const handleSearchSubmit = async () => {
    if (!searchKeyword.value.trim()) return
    
    isSearching.value = true
    showSuggestions.value = false
    showSearchHistory.value = false
    
    try {
      // 保存到搜索历史
      saveSearchToHistory(searchKeyword.value)
      
      if (searchType.value === 'internal') {
        // 站内搜索
        await new Promise(resolve => setTimeout(resolve, 300)) // 模拟搜索延迟
        store.setSearchKeyword(searchKeyword.value)
      } else {
        // 站外搜索
        performExternalSearch(searchKeyword.value, searchEngine.value)
      }
    } finally {
      isSearching.value = false
    }
  }
  
  // 执行站外搜索
  const performExternalSearch = (keyword: string, engine: string) => {
    const searchUrls: Record<string, string> = {
      'baidu': `https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`,
      'google': `https://www.google.com/search?q=${encodeURIComponent(keyword)}`,
      'bing': `https://www.bing.com/search?q=${encodeURIComponent(keyword)}`,
      'github': `https://github.com/search?q=${encodeURIComponent(keyword)}`,
      'stackoverflow': `https://stackoverflow.com/search?q=${encodeURIComponent(keyword)}`
    }
    
    const url = searchUrls[engine] || searchUrls['baidu']
    window.open(url, '_blank')
  }
  
  // 初始化
  onMounted(() => {
    initSearchHistory()
    
    // 添加全局点击事件，点击其他地方关闭建议和历史
    const handleGlobalClick = (event: MouseEvent) => {
      const target = event.target as HTMLElement
      if (!target.closest('.search-input-wrapper')) {
        showSuggestions.value = false
        showSearchHistory.value = false
      }
    }
    
    document.addEventListener('click', handleGlobalClick)
    
    // 组件卸载时移除事件监听器
    onUnmounted(() => {
      document.removeEventListener('click', handleGlobalClick)
    })
  })

  // 打开URL
const openUrl = (url: string) => {
  window.open(url, '_blank')
}

// 获取分类名称
const getCategoryName = (categoryId: string): string => {
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.name : ''
}

// 获取二级分类名称
const getSubCategoryName = (subCategoryId: string): string => {
  const subCategory = currentSubCategories.value.find(sc => sc.id === subCategoryId)
  return subCategory ? subCategory.name : ''
}

// 根据索引生成固定的颜色
const getRandomColor = (index: number): string => {
  const colors = [
    '#1890ff', '#52c41a', '#faad14', '#f5222d',
    '#722ed1', '#13c2c2', '#eb2f96', '#fa8c16'
  ]
  return colors[index % colors.length] as string
}

// 初始化加载数据
  onMounted(async () => {
  // 【动态导航注释】初始化加载所有数据
  // 实际项目中，可以根据需要调整初始化流程
  await store.initialize()
  // 确保选择第一个分类
  if (categories.value.length > 0 && categories.value[0]) {
    store.setSelectedCategory(categories.value[0].id)
  }
})
</script>

<style scoped>
.home-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* 移动端样式 */
.home-container.mobile {
  transition: all 0.3s ease;
}

.home-container.mobile.sidebar-closed .sidebar {
  transform: translateX(-100%);
}

/* 优化移动端点击体验 */
@media (max-width: 768px) {
  .category-item {
    padding: 16px;
    margin-bottom: 6px;
  }
  
  .sidebar-header {
    padding: 24px 20px;
  }
  
  /* 移动端侧边栏添加半透明遮罩 */
  .home-container.mobile:not(.sidebar-closed)::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 98;
  }
}

.home-container.mobile .main-content {
  width: 100%;
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
}

/* 移动端关闭按钮 */
.close-sidebar-btn {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #909399;
  cursor: pointer;
  padding: 8px;
}

.close-sidebar-btn:hover {
  color: #606266;
}

/* 侧边栏样式 - 隐藏滚动条但保持滚动功能 */
.sidebar {
  width: 240px;
  background-color: var(--background-color-white, #fff);
  border-right: 1px solid var(--border-light, #e4e7ed);
  display: flex;
  flex-direction: column;
  /* 隐藏滚动条但保持滚动功能 */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 99;
  box-shadow: var(--box-shadow-light);
}

/* 暗色主题下的侧边栏样式 */
.dark-theme .sidebar {
  background-color: var(--background-color-sidebar, #484848);
  border-right-color: var(--border-base);
}

/* Chrome/Safari 隐藏滚动条 */
.sidebar::-webkit-scrollbar {
  display: none;
}

/* 响应式侧边栏宽度 */
@media (max-width: 1200px) {
  .sidebar {
    width: var(--sidebar-width);
  }
}

@media (max-width: 992px) {
  .sidebar {
    width: var(--sidebar-width);
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: var(--sidebar-width);
    position: fixed;
    height: 100vh;
  }
  
  .mobile-menu-btn,
  .close-sidebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .sidebar {
    width: var(--sidebar-width);
  }
}

.sidebar-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid var(--border-light, #e4e7ed);
}

.app-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--text-primary, #337ecc);
  background: linear-gradient(135deg, var(--text-primary, #337ecc), #409eff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-subtitle {
  font-size: 14px;
  color: var(--text-secondary, #909399);
  margin: 0;
}

.category-list {
  flex: 1;
  padding: 10px;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  color: var(--text-regular, #606266);
}

.category-item:hover {
  background-color: var(--background-color-hover, #f5f7fa);
  color: var(--primary-color);
}

.category-item.active {
  background-color: rgba(64, 158, 255, 0.1);
  color: var(--primary-color);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

/* 暗色主题下的分类项样式 */
.dark-theme .category-item.active {
  background-color: rgba(64, 158, 255, 0.2);
}

.category-icon {
  margin-right: 12px;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

/* 搜索栏样式 */
.search-bar {
  padding: 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* 响应式搜索栏 */
@media (max-width: 768px) {
  .search-bar {
    padding: var(--spacing-lg);
  }
  
  .search-container {
    max-width: 100%;
  }
  
  /* 简化移动端搜索输入框 */
  .search-input-wrapper .el-input {
    width: 100%;
  }
  
  .search-input-wrapper .el-input__inner {
    padding-left: 100px !important;
    padding-right: 120px !important;
    font-size: 14px;
  }
  
  .search-type-select {
    width: 60px !important;
    font-size: 12px;
  }
  
  .search-engine-select {
    width: 80px !important;
    font-size: 12px;
  }
  
  /* 移动端搜索建议和历史样式 */
  .search-suggestions,
  .search-history {
    left: var(--spacing-lg);
    right: var(--spacing-lg);
    margin-top: 2px;
    border-radius: 8px;
  }
  
  .suggestion-item {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .search-history {
    padding: 12px;
  }
  
  .history-tags {
    gap: 6px;
  }
}

@media (max-width: 480px) {
  .search-input-wrapper .el-input__inner {
    padding-left: 90px !important;
    padding-right: 90px !important;
  }
  
  .search-button {
    font-size: 12px;
    padding: 0 12px;
  }
  
  /* 小屏幕优化 */
  .search-type-select {
    width: 55px !important;
    font-size: 11px;
  }
  
  .search-engine-select {
    width: 70px !important;
    font-size: 11px;
  }
  
  .suggestion-item {
    padding: 8px 10px;
    font-size: 13px;
  }
}

.search-container {
  max-width: 900px;
  margin: 0 auto;
}

.search-input-wrapper {
  position: relative;
}

.search-input {
  width: 100%;
  border-radius: 20px !important;
  overflow: hidden;
}

/* 前缀容器样式 */
.search-prefix-container {
  display: flex;
  align-items: center;
  padding-right: 8px;
  border-right: 1px solid #e4e7ed;
}

/* 搜索类型选择器样式 */
.search-type-select {
  margin-right: 8px;
}

/* 搜索图标样式 */
.search-icon {
  margin-left: 8px;
  color: #909399;
}

/* 后缀容器样式 */
.search-append-container {
  display: flex;
  align-items: center;
}

/* 搜索引擎选择器样式 */
.search-engine-select {
  width: 100px;
  margin-right: -1px;
  border-radius: 0;
}

/* 搜索按钮样式 */
.search-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  background-color: #409eff;
  border-color: #409eff;
  transition: all 0.3s ease;
}

.search-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.search-button:active {
  transform: translateY(0);
}

/* 优化输入框内容区域内边距 */
:deep(.el-input__wrapper) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  transition: all 0.3s ease;
  border: 1px solid #dcdfe6;
}

:deep(.el-input__wrapper:hover) {
  border-color: #c0c4cc;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.el-input__inner) {
  padding-left: 120px;
  padding-right: 140px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

/* 调整清除按钮位置 */
:deep(.el-input__clear) {
  right: 130px;
  transition: all 0.3s ease;
}

:deep(.el-input__clear:hover) {
  color: #f56c6c;
  transform: scale(1.1);
}

/* 搜索建议下拉框样式 */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  border: 1px solid #ebeef5;
  z-index: 1000;
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
}

.suggestion-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid #f5f7fa;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover,
.suggestion-item.highlighted {
  background-color: #f0f7ff;
  color: #409eff;
  transform: translateX(4px);
}

.suggestion-icon {
  margin-right: 8px;
  color: #909399;
  font-size: 16px;
}

.suggestion-item:hover .suggestion-icon,
.suggestion-item.highlighted .suggestion-icon {
  color: #409eff;
}

/* 搜索历史样式 */
.search-history {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  border: 1px solid #ebeef5;
  z-index: 999;
  padding: 16px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f5f7fa;
}

.history-title {
  font-size: 14px;
  font-weight: 600;
  color: #606266;
}

.history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-tag {
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f0f2f5;
  border-color: #e4e7ed;
  color: #606266;
}

.history-tag:hover {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  color: #409eff;
  transform: translateY(-1px);
}

/* 搜索选择器样式优化 */
:deep(.el-select) {
  transition: all 0.3s ease;
}

:deep(.el-select:hover .el-input__wrapper) {
  border-color: #409eff;
}

:deep(.el-select .el-input__inner) {
  padding: 0;
  border-radius: 0;
}

/* 搜索图标动画效果 */
.search-icon {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 加载状态动画 */
:deep(.el-button--loading) {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 二级分类标签样式 */
.subcategory-tabs {
  padding: 16px 20px 0;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  max-height: 60px;
}

/* 三级分类标签样式 */
.thirdcategory-tabs {
  padding: 16px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

/* 响应式标签样式 */
@media (max-width: 768px) {
  .subcategory-tabs,
  .thirdcategory-tabs {
    padding: var(--spacing-md) var(--spacing-lg) 0;
  }
  
  .subcategory-tag,
  .thirdcategory-tag {
    font-size: 12px;
    padding: 2px 10px;
    margin-bottom: 8px;
  }
}

.subcategory-tag {
  margin-right: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.subcategory-tag:hover {
  transform: translateY(-2px);
}

.subcategory-tag.active {
  transform: translateY(-2px);
}

/* 三级分类标签样式 */
.thirdcategory-tabs {
  background-color: #fff;
  padding: 10px 20px;
  border-bottom: 1px solid #e4e7ed;
  /* 移除最大高度限制，允许多行显示 */
}

.thirdcategory-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.thirdcategory-tag {
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 13px;
}

.thirdcategory-tag:hover {
  transform: translateY(-2px);
}

.thirdcategory-tag.active {
  transform: translateY(-2px);
}

/* 瀑布流容器样式 */
.waterfall-container {
  flex: 1;
  padding: 20px;
  /* 隐藏滚动条但保持滚动功能 */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  display: grid;
  /* 使用固定列数确保元素不足时也保持多列布局 */
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  gap: 20px;
  align-content: start;
  transition: padding 0.3s ease, gap 0.3s ease;
}

/* Chrome/Safari 隐藏滚动条 */
.waterfall-container::-webkit-scrollbar {
  display: none;
}

/* 响应式瀑布流 */
@media (max-width: 1200px) {
  .waterfall-container {
    grid-template-columns: repeat(3, minmax(var(--card-width), 1fr));
  }
}

@media (max-width: 992px) {
  .waterfall-container {
    grid-template-columns: repeat(2, minmax(var(--card-width), 1fr));
    gap: 16px;
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .waterfall-container {
    grid-template-columns: repeat(1, minmax(var(--card-width), 1fr));
    gap: 12px;
    padding: 12px;
  }
  
  .nav-card {
    padding: 12px;
  }
  
  .card-title {
    font-size: 16px;
  }
  
  .card-description {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 640px) {
  .waterfall-container {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .card-logo {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .card-footer {
    gap: 4px;
  }
}

/* 卡片样式 */
.waterfall-item {
  transition: all 0.3s;
}

.waterfall-item:hover {
  transform: translateY(-5px);
}

.nav-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.4s ease;
  border: 1px solid #f0f0f0;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.nav-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #e6f3ff;
}

.nav-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #409eff;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.card-logo {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  margin-right: 12px;
}

.card-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-description {
  font-size: 14px;
  color: #606266;
  margin: 0 0 16px 0;
  flex: 1;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.category-badge {
  background-color: #ecf5ff;
  color: #409eff;
  border-color: #d9ecff;
}

.subcategory-badge {
  background-color: #f0f9eb;
  color: #67c23a;
  border-color: #e1f3d8;
}

/* 空状态样式 */
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

/* 滚动条样式 */
:deep(.el-scrollbar__wrap) {
  overflow-x: auto;
}

.sidebar::-webkit-scrollbar,
.waterfall-container::-webkit-scrollbar {
  width: 6px;
}

.sidebar::-webkit-scrollbar-track,
.waterfall-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.sidebar::-webkit-scrollbar-thumb,
.waterfall-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.waterfall-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
